<template>
    <h1>Page 1</h1>
    <button @click="handleClick">Home</button>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';

const router = useRouter()
const handleClick = () => router.push({ path: '/Home' })

//浏览器只支持6个并发请求
class TaskScheduler {
    tasks: Array<any>;
    maxNum: number ;
    runningNum: number;
    constructor(maxNum= 2) {
        this.tasks = [];
        this.maxNum = maxNum;
        this.runningNum = 0;
    }

    async addTask(task:Function) {
        if(this.runningNum >= this.maxNum) {
            await new Promise((resolve,reject)=> {
                this.tasks.push(resolve)
            })
        }

        this.runningNum++;
        let res = await task();
        this.runningNum--;
        if(this.tasks.length) {
            this.tasks.shift()()
        }
        return res
    }
}


const schduler = new TaskScheduler(2)

function promiseTimeout(time:number) {
    return new Promise(((resolve)=> {
        setTimeout(resolve,time);
    }))
}

function addFn(time:number,label:string) {
    schduler.addTask(()=> promiseTimeout(time).then(()=> console.log(label)))
}

addFn(1000,'商品1')
addFn(500,'商品2')
addFn(300,'商品3')
addFn(400,'商品4')

</script>